<template>
	<div class="main">
		<div class="container">
			<!-- 第一行：商品的摘要信息 -->
			<div class="major mb20" :key="product.pid">
				<!-- 左侧的图片区 -->
				<section class="imgarea">
					<ul class="thumbnails">
						<li><img :src="product.cover"></li>
						<li :key="image.imageId" v-for="image in images"><img :src="image.url"></li>
					</ul>
					<div class="bigimg">
						<img :src="product.cover">
					</div>
				</section>
				<!-- 右侧的文本区 -->
				<section>
					<h2 id="title">{{product.title}}</h2>
					<p id="sell_point">{{product.sellPoint}}</p>
					<hr>
					<p id="price" class="price">￥{{product.price}}</p>
					<hr>
					<div class="number-bar">
						<span>数量</span>
						<el-input-number v-model="quantity" :min="1" :max="product.stock" label="描述文字"></el-input-number>
						<span>库存{{product.stock}}</span>
					</div>
					<hr>
					<button @click="cart" id="btnAddToCart" class="btn-blue" type="button">加入购物车</button>
				</section>
			</div>
			<!-- 第二行： 商品详细信息 -->
			<div class="information module">
				<h3 class="title">产品信息</h3>
				<div id="description" v-html="product.description">
					{{product.description}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				quantity: 1,
				product: {
					pid: '',
					sellPoint: "呵呵",
					cover: "xx",
					price: 123,
					stock: 1,
					description: 123
				},
				images: [{
					imageId: 0,
					url: ''
				}],
				user: {

				}
			}
		},
		created() {
			this.axios.get('/product/details', {
				params: {
					pid: this.$route.query.pid
				}
			}).then(response => {
				this.product = response.data.data.pro
				this.images = response.data.data.images
			})
		},
		methods: {
			cart() {
				this.user = JSON.parse(sessionStorage.getItem("newuser"));
				if (this.user == null) {
					this.$router.push({
						name: 'Login',
						params: {
							urlpath: this.$route
						}
					})
				} else {
					this.axios.post('/product/cart', {
						pid: this.product.pid,
						quantity: this.quantity,
						uid: this.user.uid
					}).then(response => {
						this.$router.push({
							name: 'Cart'
						})
					})
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.major {
		display: flex;
		height: 520px;
		background-color: #FFFFFF;
		padding: 40px 80px;
	}

	.major>section {
		width: 50%;
	}

	.thumbnails img {
		width: 80px;
		height: 80px;
		padding: 3px;
		border: 1px solid #CCCCCC;
	}

	.imgarea {
		display: flex;
	}

	.bigimg {
		flex-grow: 1;
	}

	.bigimg img {
		width: 100%;
		height: 100%;
	}

	hr {
		border: none;
		border-top: 1px solid #CCCCCC;
		margin: 20px 0px;
	}

	.price {
		font-size: 32px;
		color: #D44D44;
		font-weight: bold;
		margin: 0px;
	}

	.goods-info {
		width: 100%;
	}

	#quantity {
		border: none;
		padding: 0px;
		width: 40px;
		margin-right: 18px;
	}
</style>
